<!DOCTYPE html>
<html>
<head>
    <title>Frequency Spectrum Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px Arial';

        // Coordinates and Scaling
        const xOrigin = 80;
        const yOrigin = 330;
        const xAxisEnd = 500;
        const yAxisEnd = 50;

        // Frequency points on x-axis
        const x225 = 170;
        const x240 = 290;
        const x255 = 410;

        // Amplitude heights
        const carrierHeight = 240;
        const sidebandHeight = 100;

        // Draw Axes
        ctx.beginPath();
        // X-axis
        ctx.moveTo(xOrigin, yOrigin);
        ctx.lineTo(xAxisEnd, yOrigin);
        // Y-axis
        ctx.moveTo(xOrigin, yOrigin);
        ctx.lineTo(xOrigin, yAxisEnd);
        // Y-axis Arrowhead
        ctx.moveTo(xOrigin, yAxisEnd);
        ctx.lineTo(xOrigin - 5, yAxisEnd + 12);
        ctx.moveTo(xOrigin, yAxisEnd);
        ctx.lineTo(xOrigin + 5, yAxisEnd + 12);
        ctx.stroke();

        // Draw Spikes (Frequency Components)
        ctx.beginPath();
        ctx.lineWidth = 2;
        // Lower sideband at 225 kHz
        ctx.moveTo(x225, yOrigin);
        ctx.lineTo(x225, yOrigin - sidebandHeight);
        // Carrier wave at 240 kHz
        ctx.moveTo(x240, yOrigin);
        ctx.lineTo(x240, yOrigin - carrierHeight);
        // Upper sideband at 255 kHz
        ctx.moveTo(x255, yOrigin);
        ctx.lineTo(x255, yOrigin - sidebandHeight);
        ctx.stroke();

        // Draw Ticks on X-axis
        ctx.beginPath();
        ctx.lineWidth = 1.5;
        const tickHeight = 8;
        ctx.moveTo(x225, yOrigin);
        ctx.lineTo(x225, yOrigin + tickHeight);
        ctx.moveTo(x240, yOrigin);
        ctx.lineTo(x240, yOrigin + tickHeight);
        ctx.moveTo(x255, yOrigin);
        ctx.lineTo(x255, yOrigin + tickHeight);
        ctx.stroke();

        // Add Labels
        // Axis Labels
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('amplitude', 5, 180);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('frequency / kHz', 430, yOrigin + 25);

        // Value Labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('0', xOrigin - 8, yOrigin);

        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        const labelOffset = tickHeight + 5;
        ctx.fillText('225', x225, yOrigin + labelOffset);
        ctx.fillText('240', x240, yOrigin + labelOffset);
        ctx.fillText('255', x255, yOrigin + labelOffset);

        // Figure Caption
        ctx.font = 'bold 18px Arial';
        ctx.fillText('Fig. 4.1', canvas.width / 2, 400);

    </script>
</body>
</html>